<template>
  <div class="demo-container">
    <div class="dashboard-toolbar">
      <div class="dashboard-name">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ $route.meta.title }}<i class="el-icon-arrow-down el-icon--right"/>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in tabs" :key="index" :command="item.command" :class="{'curItem':item.name==$route.meta.title}">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="pull-right">
        <date-picker v-show="curCommand!=1001"/>
        <div class="refresh_btn">
          <el-button class="btn el-icon-refresh"/>
        </div>
      </div>
    </div>
    <div class="dashboard-content">
      <router-view />
    </div>
  </div>
</template>

<script>
import DatePicker from '@/components/DatePicker'
export default {
  name: 'DemoBoard',
  components: {
    DatePicker
  },
  data() {
    return {
      curCommand: 1001,
      tabs: [
        { name: '实时数据看板', command: 1001 },
        { name: '平台运营看板', command: 1002 },
        { name: '订购数据看板', command: 1003 },
        { name: '点播数据看板', command: 1004 }
      ]
    }
  },
  methods: {
    handleCommand(command) {
      this.curCommand = command
      this.$router.push({ path: `/demo/cibn/pane${command}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container{
  padding: 30px;
  min-height: calc(100vh - 50px);
  background: #F7F9FA;
  .dashboard-toolbar{
    position: relative;
    z-index: 10;
    padding-bottom: 15px;
    padding-right: 20px;
    overflow: hidden;
    .dashboard-name{
      float: left;
      .el-dropdown-link{
        color: #475669;
        font-size: 20px;
        font-weight: 700;
        line-height: 36px;
        max-width: 300px;
        overflow-x: auto;
        white-space: nowrap;
        cursor: pointer;
      }
    }
    .pull-right{
      float: right;
      .refresh_btn{
        cursor: pointer;
        display: inline-block;
      }
    }
  }
}
</style>
<style lang="scss">
.el-dropdown-menu{
  .curItem{
    background-color: #ecf5ff;
    color: #66b1ff;
  }
}
.dashboard-toolbar{
  .btn{
    display: inline-block;
    width: 42px;
    height: 36px;
    background: #fff;
    color: #99A9BF;
    font-size: 18px;
    padding: 5px 10px;
    border: 1px solid #E9F0F7;
  }
}
</style>
